<template>
  <div
    :class="
      current.isVisible ? `menu-title ${className} active` : `menu-title ${className}`
    "
    @click.stop="() => Hooks.handleMenuClick(current)"
  >
    <div>
      <i
        class="prefix-icon iconfont"
        :class="current.isAllVisible ? 'icon-xianshi' : 'icon-yincang'"
        @click.stop="Hooks.handleAllClick(current)"
      ></i>
      <span>{{ title }}({{ currentNumber }}/{{ sum }})</span>
    </div>
    <i
      class="suffix-icon iconfont"
      :class="current.isVisible ? 'icon-shouqi' : 'icon-daohang-jiantou-zhankai'"
    />
  </div>
  <ul class="menu-content" v-if="current.isVisible">
    <li
      v-for="item in lesionList"
      @click.stop="Hooks.handleClick(item, 1)"
      :class="current.isVisible && item.lesionData.isCurrent ? 'active' : ''"
    >
      <a-tooltip position="right" mini>
        <div class="menu-item">
          <div>
            <div
              :class="`list-item ${item.lesionData.className}`"
              v-if="item.lesionData.firstLesionId"
            >
              <!-- <i
                v-if="item.lesionData.lesionType === 4"
                class="prefix-icon iconfont"
                :class="item.lesionData.isApproveEye ? 'icon-xianshi' : 'icon-yincang'"
                @click.stop="Hooks.handleBtnClick(item, 1)"
              ></i> -->
              <span
                :style="{
                  marginLeft: item.lesionData.lesionType === 4 ? '0px' : '18px',
                }"
                >{{ item.lesionData.firstLesionName }}
                {{ item.lesionData.firstLesionId }}</span
              >
            </div>
            <div
              :class="`list-item ${item.lesionData.className}`"
              v-if="item.lesionData.secondLesionId"
            >
              <span style="margin-left: 18px"
                >{{ item.lesionData.secondLesionName }}
                {{ item.lesionData.secondLesionId }}</span
              >
            </div>
            <div
              :class="`list-item ${item.lesionData.className}`"
              v-if="item.lesionData.approveLeisonId"
            >
              <i
                class="prefix-icon iconfont"
                :class="item.lesionData.isApproveEye ? 'icon-xianshi' : 'icon-yincang'"
                @click.stop="Hooks.handleBtnClick(item, 3)"
              ></i>
              <span
                >{{ item.lesionData.approveLeisonName }}
                {{ item.lesionData.approveLeisonId }}</span
              >
              <i
                class="iconfont icon-jinbiaozhun"
                v-if="item.lesionData.lesionType !== 4"
              ></i>
            </div>
          </div>
          <div>
            <span :class="item.lesionData.approveStatus === 2 ? 'approve-active' : ''">{{
              item.lesionData.approveStatus === 2 ? "已审核" : "待审核"
            }}</span>
            <i
              class="iconfont icon-shanchu"
              v-if="isCreate"
              @click.stop="Hooks.handleClick(item, 2)"
            ></i>
          </div>
        </div>
        <template #content>
          <div>
            {{ item.lesionData.firstLesionName }}
            {{ item.lesionData.firstLesionId === 0 ? "" : item.lesionData.firstLesionId }}
          </div>
          <div>
            {{ item.lesionData.secondLesionName }}
            {{
              item.lesionData.secondLesionId === 0 ? "" : item.lesionData.secondLesionId
            }}
          </div>
          <div>
            {{ item.lesionData.approveLeisonName }}
            {{
              item.lesionData.approveLeisonId === 0 ? "" : item.lesionData.approveLeisonId
            }}
          </div>
        </template>
      </a-tooltip>
    </li>
  </ul>
  <Dialog
    :visible="Hooks.data.delVisible"
    :title="'提示'"
    :width="502"
    :maskClosable="false"
    :isForm="true"
    :modalClass="'section-dialog'"
    :okText="'确认'"
    @update:visible="Hooks.handleDelVisible"
  >
    <template v-slot>
      <div>
        <div class="submit-title">
          <i class="iconfont icon-jingshi_" style="color: #ff7d00; font-size: 18px"></i>
          确认删除该标注？
        </div>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup name="MenuList">
import { computed, reactive } from "vue";
import Dialog from "@/components/dialog/index.vue";
import Props from "../props/childProps";
import useClick from "../hooks/useClick";

const props = defineProps(Props);
const Hooks = useClick(props);
const currentNumber = computed(() => {
  let i = 0;
  props.lesionList.map((item) => {
    if (item.lesionData.approveStatus === 2) {
      i++;
    }
  });
  return i;
});
const sum = computed(() => props.lesionList.length)
</script>
<style lang="less" scoped>
@import url("../styles/muenlist.less");
</style>
<style lang="less">
.arco-popover-popup-content {
  background: #42484c;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.85);
  border: 0;
}
.arco-popover-popup-arrow {
  border: 0;
  background: #42484c;
}
</style>
